﻿@{
    Layout = "~/Views/Shared/NonFilterlayout.cshtml";
}

<script type="text/javascript">
    $(function () {
        var rowData;
        var height = $("#divTotal").height();
        var content = parseFloat(height) - 30;
        $("#tbList").css("height", content);
    });
</script>
<script type="text/javascript">
    var RoleId, perId;
    $(function () {
        RoleId = com.get.Id;
        com.ajax({
            url: "/Role/GetPermTree",
            data: { 'roleId': RoleId },
            success: function (data) {
                $("#menuTree").tree({
                    data: data,
                    onClick: function (node) {
                        if (node.attributes.isParent == "0") {
                            $("#menuTree").tree("toggle", node.target);
                        }
                        //if (node.attributes.isParent == "0") {
                        //    perId = node.id;
                        //    $("#menuTree").tree("toggle", node.target);
                        //    $("#pageper").prop("checked", false);
                        //    $("#pageper").attr("disabled", true);
                        //    layui.form.render("checkbox");
                        //}
                        //else {
                        //    if (node.attributes.isHasRight == true) {
                        //        perId = node.id;
                        //        $("#pageper").prop("checked", true);
                        //        $("#pageper").attr("disabled", false);
                        //        layui.form.render("checkbox");
                        //    }
                        //    else {
                        //        perId = node.id;
                        //        $("#pageper").prop("checked", false);
                        //        $("#pageper").attr("disabled", false);
                        //        layui.form.render("checkbox");
                        //    }
                        //}
                        perId = node.id;
                        $("#pageper").prop("checked", node.attributes.isHasRight);
                        layui.form.render("checkbox");
                        LoadButton(node.id);
                    }
                });
                $("#pageper").prop("checked", false);
                layui.form.render("checkbox");
            }
        });
        layui.use(['form'], function () {
            var form = layui.form;
            form.on('switch(page)', function (data) {
                if (data.elem.checked == true) {
                    $("#tbList").datagrid("checkAll");
                }
                else {
                    $("#tbList").datagrid("uncheckAll");
                }
            });
        });
    });
    function LoadButton(perid) {
        $("#tbList").datagrid({
            url: '/BtnPermission/GetListByID',
            loadMsg: '数据加载中请稍后……',
            pagination: false,
            rownumbers: true,
            idField: "Id",
            singleSelect: false,
            queryParams: { RoleId: RoleId, perId: perid },
            fitColumns: false,
            striped: true,
            columns: [[
               {
                   field: 'ck', checkbox: true, width: 30,
               },
               {
                   field: 'Name', title: '名称', width: 100, align: "center",
               }]],
            onLoadSuccess: function (data) {
                if (data) {
                    $.each(data.rows, function (index, item) {
                        if (item.isChecked == true) {
                            $('#tbList').datagrid('checkRow', index);
                        }
                    });
                }
            },
            onCheck: function (index, data) {
                data.isChecked = true;
            },
            onUncheck: function (index, data) {
                data.isChecked = false;
            },
            onCheckAll: function (rows) {
                for (i = 0; i < rows.length; i++) {
                    rows[i].isChecked = true;
                }
            },
            onUncheckAll: function (rows) {
                for (i = 0; i < rows.length; i++) {
                    rows[i].isChecked = false;
                }
            },
        });
    }
    function Save() {
        //$("#pageper").prop("checked");
        var rows = $("#tbList").datagrid("getRows");
        com.ajax({
            url: "/Role/EditRolePermTree",
            data: { 'data': JSON.stringify(rows), 'roleId': RoleId, 'perId': perId, "hasRight": $("#pageper").prop("checked") },
            success: function (data) {
                com.message(data.state, data.msg);
            }
        });
    }
</script>
<div id="divTotal" style="height: 100%; width: 100%">
    <div style="margin:5px" id="master">
        <a href="javascript:void(0)" id="Save" class="easyui-linkbutton" onclick="Save()"
           data-options="iconCls:'icon-save',plain:true">保存</a>
    </div>
    @*<table id="tbList" title="权限列表" style="width: 100%"></table>*@
    @*<table class="layui-hidden" id="tbList" lay-filter="treeTable"></table>*@
    <div class="first" style="width: 30%; float: left; height:90%; border: 1px solid;margin-right:10px;OVERFLOW: auto;">
        <ul id="menuTree" class="easyui-tree" data-options="animate:true"></ul>
    </div>
    @*<div style="width:1%;float: left;height:100%; border:none"></div>*@
    <div class="second" style="width: 20%; float:left; height:90%; border:none;margin-right:10px">
        <form class="layui-form">
            @*<div class="layui-form-item">*@
            <label class="layui-form-label" style="font-size:medium">页面</label>
            <input id="pageper" lay-filter="page" type="checkbox" name="close" lay-skin="switch" lay-text="显示|不显示">
            @*</div>*@
        </form>
    </div>
    <div class="third" style="width: 30%; float:left; height: 90%; border: 1px solid;OVERFLOW: auto;">
        <table id="tbList" title="按钮权限" style="width: 100%"></table>
    </div>
</div>
